<template>
	<div class="container">
		<div class="form-content">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
				<el-row>
					<el-col :span="11">
						<el-form-item label="商家名称" prop="name">
							<el-input v-model="ruleForm.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="商家手机" prop="phone">
							<el-input v-model="ruleForm.phone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="商家座机" prop="telephone">
							<el-input v-model="ruleForm.telephone"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="身份证号" prop="cardNo">
							<el-input v-model="ruleForm.cardNo"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="信用代码" prop="storeCode">
							<el-input v-model="ruleForm.storeCode"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="创建人手机号" prop="createrPhone">
							<el-input v-model="ruleForm.createrPhone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="经度" prop="longitude">
							<el-input v-model="ruleForm.longitude"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="纬度" prop="latitude">
							<el-input v-model="ruleForm.latitude"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="介绍" prop="basicSituation">
						<el-input type="textarea" v-model="ruleForm.basicSituation"></el-input>
					</el-form-item>
				</el-row>
				<el-form-item label="所有人身份证照片">
					<el-upload class="avatar-uploader" list-type="picture-card" action="http://192.168.2.95:7009/file/uploadFile"
					 :on-preview="cardHandlePictureCardPreview" :on-remove="cardHandleRemove" :on-exceed="cardExceed" :limit="2"
					 :on-success="handleCardSuccess" with-credentials>
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="cardVisible">
						<img width="100%" :src="cardImageUrl" alt="">
					</el-dialog>
				</el-form-item>
				<el-form-item label="营业执照 ">
					<el-upload class="avatar-uploader" list-type="picture-card" action="http://192.168.2.95:7009/file/uploadFile"
					 :on-preview="storeHandlePictureCardPreview" :on-remove="storeHandleRemove" :on-exceed="storeExceed" :limit="1"
					 :on-success="handleStoreSuccess" with-credentials>
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="storeVisible">
						<img width="100%" :src="storeImageUrl" alt="">
					</el-dialog>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
					<el-button @click="cancelBusiness">取消</el-button>
				</el-form-item>
			</el-form>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'addBusiness',
		data() {
			return {
				cardfileList: [],
				storefileList: [],
				workSituationfileList: [],
				cardImageUrl: '',
				cardVisible: false,
				storeVisible: false,
				storeImageUrl: '',
				workSituationImageUrl: '',
				workSituationVisible: false,
				ruleForm: {
					name: '',
					phone: '',
					telephone: '',
					cardNo: '',
					cardNoImg: '',
					storeImg: '',
					storeCode: '',
					basicSituation: '',
					workSituation: '',
					latitude: '',
					longitude: '',
					createrPhone: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入商家名称',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入商家手机号',
						trigger: 'blur'
					}],
					cardNo: [{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur'
					}],
					storeCode: [{
						required: true,
						message: '请输入信用代码',
						trigger: 'blur'
					}],
					basicSituation: [{
						required: true,
						message: '请输入活动介绍',
						trigger: 'blur'
					}],
					latitude: [{
						required: true,
						message: '请输入纬度',
						trigger: 'blur'
					}],
					longitude: [{
						required: true,
						message: '请输入经度',
						trigger: 'blur'
					}],
					introduction: [{
						required: true,
						message: '请输入介绍',
						trigger: 'blur'
					}],
				},
			}
		},
		watch: {

		},
		mounted() {
			this.initStoreData();
		},
		methods: {
			initStoreData() {
				let route = this.$route.name;
				if (route === 'editBusiness') {
					this.getStoreDetail();
				}
			},
			//取消
			cancelBusiness() {
				this.$router.go(-1)				
			},
			//获取商户详情			
			getStoreDetail() {
				let that = this;
				that.HttpUtil.encryptGet(
					that,
					that.Global.URLPATH.GETSTOREDETAIL, {
						id: that.$route.params.id
					},
					function(res) {
						if (res.status == 0) {
							that.ruleForm = res.data;
							that.storeImageUrl = res.data.storeImg;
							that.storeImageUrl = res.data.cardNoImg;
						}
					},
					function(err) {});
			},
			//数组转逗号字符串
			acTiveArrStringFun(obj) {
				var arr = [];
				if (obj != null && obj.length != 0) {
					for (var i = 0; i < obj.length; i++) {
						arr.push(obj[i]);
					}
				}
				return arr.toString();
			},
			//submitForm
			submitForm(formName) {
				let that = this;
				that.$refs[formName].validate((valid) => {
					if (valid) {
						if (that.cardfileList.length > 0) {
							that.ruleForm.cardNoImg = that.acTiveArrStringFun(that.cardfileList)
						} else {
							that.$message.warning('请上传身份证照片');
							return;
						}
						if (that.storefileList.length > 0) {
							that.ruleForm.storeImg = that.storefileList[0];
						} else {
							that.$message.warning('请上传营业执照照片');
							return;
						}
						// if (that.workSituationfileList.length > 0) {
						// 	that.ruleForm.workSituation = that.acTiveArrStringFun(that.workSituationfileList)
						// } else {
						// 	that.$message.warning('请上传身份证照片');
						// 	return;
						// }
						that.HttpUtil.encryptPost(
							that,
							that.Global.URLPATH.ADDSTORE, that.ruleForm,
							function(res) {
								that.$message.success('新增成功');
								that.$router.push({
									name: 'business'
								});
							},
							function(err) {});

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//上传成功 
			handleCardSuccess(file, fileList) {
				if (file.status == 0) {
					this.cardfileList.push(file.data);
				}
			},
			handleStoreSuccess(file, fileList) {
				if (file.status == 0) {
					this.storefileList.push(file.data);
				}
			},
			handleWorkSituationSuccess(file, fileList) {
				if (file.status == 0) {
					this.workSituationfileList.push(file.data);
				}
			},
			//大图预览
			cardHandlePictureCardPreview(file, fileList) {
				this.cardImageUrl = file.url;
				this.cardVisible = true;
			},
			storeHandlePictureCardPreview(file) {
				this.storeImageUrl = file.url;
				this.storeVisible = true;
			},
			workSituationHandlePictureCardPreview(file) {
				this.workSituationImageUrl = file.url;
				this.workSituationVisible = true;
			},
			//上传图片删除
			cardHandleRemove(file, fileList) {},
			storeHandleRemove(file, fileList) {},
			workSituationHandleRemove(file, fileList) {},
			//上传图片超过限制
			workSituationExceed(files, fileList) {
				this.$message.warning(`图片最多上传8张`);
			},
			cardExceed(files, fileList) {
				this.$message.warning(`身份证照片最多上传2张`);
			},
			storeExceed(files, fileList) {
				this.$message.warning(`营业执照最多上传1张`);
			},
		}
	}
</script>

<style>
	@import "../../../assets/css/common.css";

	.form-content {
		width: 800px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.el-upload--text {
		width: 180px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
